<div>
    <div class="bg-white rounded-xl p-6 pb-4">
        <div class="text-lg">博客留言</div>
        <div class="mt-4">
            @if(count($messages) == 0)
                <div class="text-center mt-10">
                    <p class="text-base font-semibold text-indigo-600">暂无数据</p>
                    <p class="mt-6 text-base leading-7 text-gray-600">还没有人留言，赶紧抢个沙发~</p>
                </div>
            @endif
            @foreach($messages as $message)
                <div class="border-0 pb-6 mb-6">
                    <div class="flex">
                        <div class="w-10">
                            <img class="rounded-full" src="{{ @asset('assets/image/avatar.png') }}" alt="">
                        </div>
                        <div class="flex-grow ml-4">
                            <div class="text-base mb-1">
                                {{ $message['name'] }}
                            </div>
                            <div class="leading-4 text-xs text-gray-500">
                                <span>于{{ $message['created_at']->format('Y-m-d H:i') }}</span>
                                留言：
                            </div>
                        </div>
                    </div>
                    <div class="mt-2 pl-14 html">
                        {!! $message['content'] !!}
                    </div>
                    @if(!empty($message['reply_content']))
                        <div class="mt-4 pl-14">
                            <div class="bg-gray-100 p-2 rounded">
                                <div class="text-base">博主回复：</div>
                                <div class="text-sm text-gray-700 mt-1">{!! $message['reply_content'] !!}</div>
                            </div>
                        </div>
                    @endif
                </div>
            @endforeach
        </div>
        <div class="mt-3 mb-5 flex justify-center">
            {{ $messages->links() }}
        </div>
    </div>
</div>
